<template>
<span @click="centerDialogVisible = true">
        {{command}}
    </span>

    <el-dialog v-model="centerDialogVisible" :title="command" width="30%" center :append-to-body='true'>
        <el-form :model="userRef" >
            <el-form-item label="用户名" :label-width="formLabelWidth" >
                <el-input v-model="userRef.userName" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth" >
                <el-input v-model="userRef.userAvatar" placeholder="请输入头像在线地址" autocomplete="off" disabled />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" >
                <el-radio-group v-model="userRef.sex" disabled>
                    <el-radio :label="0" value="0">男</el-radio>
                    <el-radio :label="1" value="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
const props = defineProps(["command"])
const centerDialogVisible = ref(false)

const formLabelWidth = '140px'

const userRef = inject('userRef');

</script>

<style scoped lang="less">
.el-dialog{
    height: 40%;
}
</style>